<template>
    <div>
        <!--        面包屑-->
        <!--        <el-breadcrumb separator="/" style="padding-left: 10px;padding-bottom: 10px;font-size: 12px">-->
        <!--            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>-->
        <!--            <el-breadcrumb-item>导入导出管理</el-breadcrumb-item>-->
        <!--        </el-breadcrumb>-->
        <!--        用户列表卡片-->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="学号" label-width="70px" prop="source">
                <el-input clearable v-model="formInline.username" placeholder="请输入学号"></el-input>
            </el-form-item>
            <el-form-item label="姓名" label-width="70px" prop="source">
                <el-input clearable v-model="formInline.name" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item label="归属" label-width="70px" prop="grade">
                <el-input clearable v-model="formInline.affiliation" placeholder="请输入归属"></el-input>
            </el-form-item>
            <el-form-item style="margin-left: 10px">
                <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
                <el-button @click="select" type="primary" icon="el-icon-search">查询</el-button>
                <el-button type="success" icon="el-icon-plus" @click="showAdd">添加</el-button>
                <el-button :disabled="this.batchIds.length===0" type="warning" icon="el-icon-document-checked"
                           @click="showAutoExamImport">自动阅卷
                </el-button>
                <el-button :disabled="this.batchIds.length===0" type="warning" icon="el-icon-upload2"
                           @click="importExcel">导出Excel
                </el-button>
                <el-button type="warning" icon="el-icon-down" @click="uploadVisible = true">导入成绩</el-button>
                <el-button :disabled="this.batchIds.length===0" type="danger" icon="el-icon-delete"
                           @click="batchDelete">批量删除
                </el-button>
            </el-form-item>
        </el-form>
        <el-checkbox-group v-model="checkArr" size="medium">
            <el-col :span=4 v-for="item in optionalColumnList" :key="item.prop">
                <el-checkbox :label="item.propName" @change="menuChange(item)"></el-checkbox>
            </el-col>
        </el-checkbox-group>
        <el-table @selection-change="handleSelectionChange" border
                  :data="tableData"
                  ref="multipleTable"
        >
            <span><el-table-column type="selection" width="55" @click="batchDelete()"></el-table-column></span>
            <el-table-column :label="item.propName" :property="item.prop" v-for="(item) in tableColumnList"
                             :key="item.prop" sortable>
                <template slot-scope="scope">
                    <img v-if="item.propName==='考卷答题'" alt="丢失了" :src="scope.row.paper"
                         style="width:100px;height:130px"/>
                    <span v-else>{{scope.row[scope.column.property]}}</span>
                </template>
            </el-table-column>

            <el-table-column fixed="right" label="操作" width="175px">
                <template slot-scope="scope">
                    <!--                    <el-button @click="autoExamImport(scope.row)" type="warning" size="mini"-->
                    <!--                               icon="el-icon-document-checked"></el-button>-->
                    <el-button @click="showEdit(scope.row)" type="danger" size="mini"
                               icon="el-icon-edit"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination style="padding-top: 15px"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page.sync="current"
                       :page-sizes="[1, 2, 3, 6, 15]"
                       :page-size="size"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>

        <el-dialog
                :visible.sync="uploadVisible"
                width="30%">
            <input type="file" ref="myfile">
            <el-button @click="importData" type="success" size="mini" icon="el-icon-upload2">导入数据</el-button>
        </el-dialog>

        <el-dialog
                title="编辑考试"
                :visible.sync="dialogVisible"
                width="30%">
            <div>
                <div>
                    <el-tag>学号</el-tag>
                    <el-input v-model="updateTableData.username" size="small" class="updatePosInput"
                              placeholder="请输入学号"></el-input>
                </div>
                <div>
                    <el-tag type="success">识别答案</el-tag>
                    <el-input v-model="updateTableData.scanAnswer" size="small" class="updatePosInput"
                              placeholder="请输入识别答案"></el-input>
                </div>
                <div>
                    <el-tag type="info">客观分</el-tag>
                    <el-input v-model="updateTableData.objScore" size="small" class="updatePosInput"
                              placeholder="请输入客观分"></el-input>
                </div>
                <div>
                    <el-tag type="warning">主观分</el-tag>
                    <el-input v-model="updateTableData.subScore" size="small" class="updatePosInput"
                              placeholder="请输入主观分"></el-input>
                </div>
                <div>
                    <el-tag type="danger">分数</el-tag>
                    <el-input v-model="updateTableData.score" size="small" class="updatePosInput"
                              placeholder="请输入分数"></el-input>
                </div>
                <div>
                    <el-tag>姓名</el-tag>
                    <el-input v-model="updateTableData.name" size="small" class="updatePosInput"
                              placeholder="请输入姓名"></el-input>
                </div>
                <div>
                    <el-tag type="success">归属</el-tag>
                    <el-input v-model="updateTableData.affiliation" size="small" class="updatePosInput"
                              placeholder="请输入归属"></el-input>
                </div>
                <div>
                    <el-tag type="info">试卷</el-tag>
                    <el-input v-model="updateTableData.paper" size="small" class="updatePosInput"
                              placeholder="请输入试卷url"></el-input>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateOrInsert">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
                title="客观题答案"
                :visible.sync="answerVisible"
                width="30%">
            <div>
                <el-row>
                    <el-tag type="danger">客观题答案</el-tag>
                    <el-input v-model="answer" size="small" class="updatePosInput" placeholder="请输入答案"></el-input>
                </el-row>
                <!--                <el-tag type="danger">答案</el-tag><el-input v-model="answer" size="small" class="updatePosInput" placeholder="请输入答案"></el-input>-->
                <el-row>
                    <el-tag type="danger">选择题分值</el-tag>
                    <el-input-number class="updatePosInput" size="small" v-model="answerNum.xuanZeNum" controls-position="right"></el-input-number>
                </el-row>
                <el-row>
                    <el-tag type="danger">判断题分值</el-tag>
                    <el-input-number class="updatePosInput" size="small" v-model="answerNum.panDuanNum" controls-position="right"></el-input-number>
                </el-row>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="answerVisible = false">取 消</el-button>
                <el-button type="primary" @click="autoExamImport">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "TeacherDeriveExcelExamManage",
        components: {},
        methods: {
            importData() {
                let myfile = this.$refs.myfile;
                let files = myfile.files;
                let file = files[0];
                var formData = new FormData();
                formData.append("file", file);
                this.postRequest('/EasyPoi/readListByExcel', formData).then(resp => {
                    if (resp) {
                        this.select();
                    }
                })
            },
            // importScore(file){
            //     this.getRequest('/EasyPoi/readListByExcel',file).then(resp=>{
            //         if(resp){
            //             this.$message(resp.data.message);
            //         }
            //     })
            // },
            importExcel() {
                let ids = '?';
                this.batchIds.forEach(item => {
                    ids += 'ids=' + item.id + '&';
                });
                ids = ids.substring(0, ids.length - 1);
                this.downloadRequest('/EasyPoi/writeListByIds' + ids);
            },
            showAutoExamImport() {
                this.answerVisible = true;
            },
            autoExamImport() {
                this.batchIds.forEach(item => {
                    this.arrayDeriveExcel.push(item);
                });
                this.postRequest(
                    '/Auto/examByUrlAndId/'+this.answer+'/'+this.answerNum.xuanZeNum+'/'+this.answerNum.panDuanNum,this.arrayDeriveExcel).then(resp=>{
                    if(resp){

                        this.$message(resp.data.message)
                        this.arrayDeriveExcel = [];
                        this.select();
                    }
                })
                this.answerVisible = false;
            },
            handleSelectionChange(val) {
                this.batchIds = val;
            },
            batchDelete() {
                this.$confirm('此操作将永久删除' + this.batchIds.length + '条数据,是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let ids = '?';
                    this.batchIds.forEach(item => {
                        ids += 'ids=' + item.id + '&';
                    });
                    // this.$message(ids);
                    this.deleteRequest('/Excel/deleteBatchIds' + ids).then(resp => {
                        if (resp) {
                            this.select();
                        }
                    })
                })
            },
            showAdd() {
                this.dialogVisible = true;
                this.updateTableData = {
                    "username": "",
                    "scanAnswer": "",
                    "objScore": "",
                    "subScore": "",
                    "score": "",
                    "name": "",
                    "affiliation": "",
                    "paper": "",
                };
            },
            updateOrInsert() {
                this.postRequest('/Excel/updateOrInsert', this.updateTableData).then(resp => {
                    // 看一下返回信息
                    // alert(JSON.stringify(resp));
                    if (resp) {
                        this.select();
                        this.dialogVisible = false;
                    }
                })
            },
            showEdit(row) {
                // console.log(row);
                // Object.assign(this.updateTableData,row);// 注意日期的格式
                this.updateTableData = row;
                this.dialogVisible = true;
            },
            select() {
                this.postRequest('/Excel/select/' + this.current + '/' + this.size, this.formInline).then(resp => {
                    // 看一下返回信息
                    // console.log(this.formInline);
                    // alert(JSON.stringify(resp));
                    if (resp) {
                        this.tableData = resp.data.records;
                        this.total = resp.data.total;
                    }
                })
            },
            // 分页改变每页数量
            handleSizeChange(size) {
                this.size = size;
                this.select();
            },
            // 分页改变当前页数
            handleCurrentChange(current) {
                this.current = current;
                this.select();
            },
            // 动态表头
            menuChange(item) {
                // 注意  我这里都用的假数据，要从后台获取tableColumnList和dataList的时候
                //，每一次调用menuChange都要重新获取tableColumnList和dataList，保证属性和数据是对应的
                let flag = true
                for (let i = 0; i < this.checkArr.length; i++) {
                    if (this.checkArr[i] === item.propName) {
                        flag = false
                        break
                    }
                }
                if (!flag) {
                    this.tableColumnList.push(item)
                }
                if (flag) {
                    Array.prototype.contains = function (obj) {
                        let j = this.length;
                        while (j--) {
                            if (this[j] === obj) {
                                return j; // 返回的这个 i 就是元素的索引下标，
                            }
                        }
                        return false
                    }
                    this.tableColumnList.splice(this.tableColumnList.contains(item), 1)
                }
            },
            reset() {
                this.formInline.username = null;
                this.formInline.name = null;
                this.formInline.affiliation = null;
                this.select();
            },
        },
        created() {
            this.formInline.examId = this.$route.query.examId;
            this.select();
        },
        data() {
            return {
                // 分页
                size: 6,
                current: 1,
                total: 0,
                dialogVisible: false, // 编辑弹出框显示控制
                updateTableData: {
                    "username": "",
                    "scanAnswer": "",
                    "objScore": "",
                    "subScore": "",
                    "score": "",
                    "name": "",
                    "affiliation": "",
                    "paper": "",
                },
                tableData: null,
                tableColumnList:
                    [
                        {prop: 'examId', propName: '考试ID'},
                        {prop: 'username', propName: '学号'},
                        {prop: 'scanAnswer', propName: '扫描答案'},
                        {prop: 'objScore', propName: '客观分数'},
                        {prop: 'subScore', propName: '主观分数'},
                        {prop: 'score', propName: '总分'},
                    ],
                optionalColumnList:
                    [
                        {prop: 'name', propName: '姓名'},
                        {prop: 'affiliation', propName: '归属'},
                        {prop: 'paper', propName: 'url'},
                        {prop: 'paperImg', propName: '考卷答题'},
                    ],
                checkArr: [],
                formInline: {
                    "username": null,
                    "name": null,
                    "affiliation": null,
                    "examId": null,
                },
                batchIds: [], //批量删除多选框
                arrayDeriveExcel: [],
                answer: null,
                answerNum: {
                    xuanZeNum: 0,
                    panDuanNum: 0,
                },
                answerVisible: false,
                uploadVisible: false,
                file: null,
            }
        }
    }
</script>
<style>
    .updatePosInput {
        width: 180px;
        margin: 8px;
    }
</style>